<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/order/add">订单管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>添加订单</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0;">添加订单</h3>

    <el-form :model="tbOrderForm" :rules="rules" ref="tbOrderForm" label-width="150px" class="demo-tbOrderForm">
      <el-form-item label="订单id" prop="orderId">
        <el-input v-model="tbOrderForm.orderId"></el-input>
      </el-form-item>

      <el-form-item label="订单编号" prop="orderNum">
        <el-input v-model="tbOrderForm.orderNum"></el-input>
      </el-form-item>

      <el-form-item label="用户id" prop="userId">
        <el-input v-model="tbOrderForm.userId"></el-input>
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus" >
        <el-select v-model="tbOrderForm.orderStatus" placeholder="请选择订单状态">

          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.orderStatus">
          </el-option>


        </el-select>

      </el-form-item>

      <el-form-item label="商品总金额" prop="goodsMoney">
        <el-input v-model="tbOrderForm.goodsMoney"></el-input>
      </el-form-item>

      <el-form-item label="运费" prop="deliverMoney">
      <el-input v-model="tbOrderForm.deliverMoney"></el-input>
    </el-form-item>

      <el-form-item label="订单总金额" prop="totalMoney">
        <el-input v-model="tbOrderForm.totalMoney"></el-input>
      </el-form-item>

      <el-form-item label="收货人名称" prop="userName">
        <el-input v-model="tbOrderForm.userName"></el-input>
      </el-form-item>

      <el-form-item label="收货人地址" prop="userAddress">
        <el-input v-model="tbOrderForm.userAddress"></el-input>
      </el-form-item>

      <el-form-item label="收货人电话" prop="userPhone">
        <el-input v-model="tbOrderForm.userPhone"></el-input>
      </el-form-item>

      <el-form-item label="订单备注" prop="orderRemarks">
        <el-input v-model="tbOrderForm.orderRemarks"></el-input>
      </el-form-item>



      <el-form-item label="是否支付" prop="isPay">
        <el-switch
            v-model="tbOrderForm.isPay"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999">
        </el-switch>
      </el-form-item>

      <el-form-item label="是否删除" prop="isDelete">
        <el-switch
            v-model="tbOrderForm.isDelete"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999">
        </el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('tbOrderForm')">立即添加</el-button>
        <el-button @click="resetForm('tbOrderForm')">重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      tbOrderForm: {
        orderId: '',
        orderNum: '',
        userId: '',
        orderStatus: '',
        goodsMoney: '',
        deliverMoney: '',
        totalMoney: '',
        userName: '',
        userAddress:'',
        userPhone:"",
        orderRemarks: '',
        isPay: false,
        isDelete:'',
      },
      options: {
        0: {
          orderStatus: '1',
          type: '待付款'
        },
        1: {
          orderStatus: '2',
          type: '待发货'
        },
        2: {
          orderStatus: '3',
          type: '待收货'
        },
        3: {
          orderStatus: '4',
          type: '待评价'
        },

      },



      rules: {
        orderId: [
          {required: false, message: '请输入订单id', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        orderNum: [
          {required: true, message: '请输入订单编号', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        userId: [
          {required: true, message: '请输入用户id', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],

        goodsMoney: [
          {required: true, message: '请输入商品总金额 ', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        deliverMoney: [
          {required: true, message: '请输入运费 ', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        totalMoney: [
          {required: true, message: '请输入订单总金额 ', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        userName: [
          {required: true, message: '请输入收货人名称 ', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        userAddress: [
          {required: true, message: '请输入收货人地址 ', trigger: 'blur'},
          {min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur'}
        ],
        userPhone: [
          {required: true, message: '请输入收货人电话 ', trigger: 'blur'},
          {min: 11, max: 11, message: '长度在 11 到 11 个字符', trigger: 'blur'}
        ],
        orderRemarks: [
          {required: false, message: '订单备注 ', trigger: 'blur'},
          {min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur'}
        ],
      }
    };
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8888/tbOrders/add-new';
          console.log('url >>> ' + url);
          console.log('data >>> ');
          console.log(this.tbOrderForm);
          this.axios
              // .create({headers: {'Authorization': localStorage.getItem('jwt')}})
              .post(url, this.tbOrderForm).then((response) => {
            console.log(response.data);
            if (response.data.code == 2000) {
              this.$message({
                message: '添加订单成功！',
                type: 'success'
              });
            } else {
              this.$message.error(response.data.message);
            }
          }).catch(function(error) {
            console.log('响应结果为失败！');
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
